import React, { useCallback, useEffect, useState } from 'react'
import request from '@/utils/request'
import {
    message,
    Form,
    Input,
    Button,
    Radio,
    Select,
    Cascader,
    DatePicker,
    InputNumber,
    TreeSelect,
    Switch,
    Rate,
} from 'antd';
function From({ ...props }) {
    const datakeys = ['普通用户', 'VIP', "SVIP"]
    const rules = { username: [{ required: true, message: 'Please input your username!' }], account: [{ required: true, message: 'Please input your acount!' }], password: [{ required: true, message: 'Please input your password!' }] }
    // const dataItem = datakeys.map((item) => {
    //     return item
    // })
    // console.log(dataItem);
    // console.log(props);
    const { data } = props
    // console.log("data=====",data);
    console.log("history", props);
    const [form] = Form.useForm()
    const isEdit = !!data;
    const [select, setSelect] = useState('')

    const selectChange = useCallback((value) => {
        // console.log('select',value);
        setSelect(value)
    }, [])

    const onFinish = useCallback(async function (userObj) {
        if (isEdit) {
            userObj.userTypes = select
            const { data } = await request.patch('/getuserlist/patchuser', {userObj})
            // console.log('data=', data)
            if (data.code === 200) {
                message.success('用户改成功')
                props.props.history.push('/manage/user/list')
            }
        } else {
            userObj.userTypes = select
            const { data } = await request.post('/getuserlist/adduser', { userObj })
            // console.log("select",select);
            // console.log(userObj);
            if (data.code === 200) {
                message.success('用户添加成功');
                props.props.history.push('/manage/user/list')
            }else{
                message.success('用户已存在');
            }

        }
    }, [select])

    
    if (isEdit) {
        console.log(props.data.userTypes);
        form.setFieldsValue(data)
        console.log("from ",form);
    }
    const selectAfter = (
        <Select defaultValue={isEdit ? data.userTypes : "请选择"} onChange={selectChange}>
            {datakeys.map((item) => {
                return <Select.Option key={item} value={item}>{item}</Select.Option>
            })}
            {/* <Option value=".com">{Object.keys(data)}</Option>
            <Option value=".jp">.jp</Option>
            <Option value=".cn">.cn</Option>
            <Option value=".org">.org</Option> */}
        </Select>
    );
    return (
        <Form
            labelCol={{
                span: 4,
            }}
            wrapperCol={{
                span: 18,
            }}
            layout="horizontal"
            form={form}
            onFinish={onFinish}
        >
            <Form.Item label="用户昵称" name="username" rules={rules.username}>
                <Input />
            </Form.Item>
            <Form.Item label="用户账号" name="account" rules={rules.account}>
                <Input />
            </Form.Item>
            <Form.Item label="用户密码" name="password" rules={rules.password}>
                <Input />
            </Form.Item>
            <Form.Item label="用户类型">
                {/* <Input /> */}
                {selectAfter}
            </Form.Item>
            <Form.Item label="用户等级" name="level">
                <InputNumber />
            </Form.Item>
            <Form.Item wrapperCol={{
                offset: 4,
            }}>
                <Button type="primary" htmlType="submit">提交</Button>
            </Form.Item>
        </Form>
    )
}

export default From;